<template>
    <view class="library-header">
        <!-- 轮播图区域 -->
        <view class="header-swiper">
            <u-swiper
                :list="swiperList"
                mode="rect"
                :height="550"
                indicator-pos="bottomCenter"
            ></u-swiper>

            <!-- 底部阴影渐变层 -->
            <view class="swiper-gradient"></view>
        </view>

        <!-- 搜索框 - 覆盖在轮播图上 -->
        <view class="header-search">
            <view class="search-container">
                <han-icon name="search" size="38" class="search-icon" />
                <input
                    placeholder="探索汉服文化"
                    class="input"
                    placeholder-class="placeholder-style"
                />
                <view class="search-btn">搜索</view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref } from 'vue';

const swiperList = ref([
    {
        image: '../../static/login/chunfen.png',
        title: '春分'
    },
    {
        image: '../../static/login/lixia.png',
        title: '立夏'
    },
    {
        image: '../../static/login/guyu.png',
        title: '谷雨'
    }
]);
</script>

<style lang="scss">
.library-header {
    position: relative;
    height: 550rpx;

    .header-swiper {
        width: 100%;
        height: 100%;
        position: relative;

        // 底部阴影渐变
        .swiper-gradient {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 150rpx;
            background: linear-gradient(
                to top,
                rgba(51, 51, 51, 0.2) 0%,
                rgba(51, 51, 51, 0.1) 60%,
                rgba(51, 51, 51, 0) 100%
            );
            z-index: 1;
        }
    }

    .header-search {
        position: absolute;
        top: 88rpx;
        left: 50%;
        transform: translateX(-50%);
        width: 90%;
        z-index: 10;

        .search-container {
            display: flex;
            align-items: center;
            background: rgba(255, 255, 255, 0.9); // 半透明白色背景
            border-radius: $han-border-radius-lg; // 更大的圆角
            box-shadow: 0 6rpx 30rpx rgba(0, 0, 0, 0.1); // 更柔和的阴影
            padding: 10rpx 20rpx;
            height: 80rpx;
            border: 1rpx solid rgba($han-primary-color, 0.3); // 半透明边框

            .search-icon {
                color: $han-global-secondary-font-color;
                margin-right: 10rpx;
            }

            .input {
                flex: 1;
                font-size: $han-font-size-md;
                height: 100%;
                padding: 0 10rpx;
                background: transparent; // 透明背景
            }

            .placeholder-style {
                color: $han-global-secondary-font-color;
                font-size: $han-font-size-md;
            }

            .search-btn {
                width: 120rpx;
                height: 60rpx;
                line-height: 60rpx;
                text-align: center;
                border-radius: $han-border-radius-md;
                background-color: rgba($han-primary-color, 0.9); // 半透明主题色
                color: #f0fcff;
                font-size: $han-font-size-base;
                transition: all 0.3s ease; // 添加过渡效果

                &:active {
                    background-color: $han-primary-color; // 点击时变为实色
                    transform: scale(0.98);
                }
            }
        }
    }
}
</style>
